<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
#box1{
    width: 720px;
    height: 720px;
    margin: auto;
    margin-top: 5%;
    background: red;
    overflow: hidden;
    border-radius: 100%;
}
#box2{
    width: 620px;
    height: 620px;
    margin: auto;
    margin-top: 50px;
    background: orange;
    overflow: hidden;
    border-radius: 100%;
}
#box3{
    width: 520px;
    height: 520px;
    margin: auto;
    margin-top: 50px;
    background: yellow;
    overflow: hidden;
    border-radius: 100%;
}
#box4{
    width: 420px;
    height: 420px;
    margin: auto;
    margin-top: 50px;
    background: green;
    overflow: hidden;
    border-radius: 100%;
}
#box5{
    width: 320px;
    height: 320px;
    margin: auto;
    margin-top: 50px;
    background: cyan;
    overflow: hidden;
    border-radius: 100%;
}
#box6{
    width: 220px;
    height: 220px;
    margin: auto;
    margin-top: 50px;
    background: blue;
    overflow: hidden;
    border-radius: 100%;
}
#box7{
    width: 120px;
    height: 120px;
    margin: auto;
    margin-top: 50px;
    background: purple;
    overflow: hidden;
    border-radius: 100%;
}
#box8{
    width: 20px;
    height: 20px;
    margin: auto;
    margin-top: 50px;
    background: #fff;
    overflow: hidden;
    border-radius: 100%;
}

</style>

<body>

    <!-- <button id="but">123</button>
    <div id="box">
        <p>请问能问你个问题吗？</p>
    </div>
    <div id="box1">
        你好！请问民政局怎么走。
        <p>非常感谢 <span>不用谢</span></p>
    </div> -->


    <!-- <ul onclick="fn()" id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <button onclick="fun()">点击添加</button>
    </ul> -->



    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6">
                            <div id="box7">
                                <div id="box8"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        // event.stopPropagation()
        box1.onclick = function () {
            // console.log();
            event.stopPropagation(console.log('一'))
        }
        box2.onclick = function () {
            event.stopPropagation(console.log('生'))
        }
        box3.onclick = function () {
            event.stopPropagation(console.log('一'))
        }
        box4.onclick = function () {
            event.stopPropagation(console.log('世'))
        }
        box5.onclick = function () {
            event.stopPropagation(console.log('我'))
        }
        box6.onclick = function () {
            event.stopPropagation(console.log('爱'))
        }
        box7.onclick = function () {
            event.stopPropagation(console.log('你'))
        }
        box8.onclick = function () {
            event.stopPropagation(console.log('moa~'))
        }



        // 1
        // function fn() {
        //     console.log(event.target.innerHTML);
        //     console.log(event.target.nodeName);
        // }
        // function add() {
        //     console.log(
        //         this
        //     );
        // }
        // function fun() {
        //     var obj = document.createElement('li')
        //     obj.innerHTML = '新增li'
        //     document.getElementById('nav').appendChild(obj)
        // }



        // window.onload = function () {
            
        //     var obj = document.getElementsByTagName('li')
        //     for(let i = 0; i < obj.length; i++){
        //         obj[i].onclick = add
        //     }



            // var sum = `<button>456</button>`
            // box.innerHTML = sum

            // var but = document.createElement('button')  // 创建按钮
            // var but1 = document.getElementById('box1')  // 获取标签
            // // console.log(but1);
            // document.body.appendChild(but) // 向元素添加新的子节点，作为最后一个子节点。
            // console.log(but);




            // document.body.replaceChild(but,box) // 替换一个子节点 参数1：新元素 参数2：旧元素
            // console.log(box1.attributes); // 属性列表

            // var clone = but.cloneNode()
            // console.log(clone); // 克隆一个元素对象
            // var num = document.getElementById('box')
            // document.getElementById('box1').childNodes

            // console.log(
            //     document.getElementById('box1').childNodes,box1.childNodes
            // );
            // var box2 = document.getElementById('box1')
            // console.log(box2.childNodes);

            // box2.removeChild (document.getElementsByTagName('box1')[1]) // 删除一个子节点 参数：节点对象
            
            //  var but = document.getElementById('button')
            // but.childNodes[0].nodeValue = 520


            // but.innerHTML = 222

        // }




    </script>
</body>

</html>